<template>
	<div class="confirm-area">
    <div class="confirm-bar">
      <div class="confirm-con" @click.stop>
        <mt-navbar v-model="selectedVal"  refs="navTitle" :class="[setClass]" class="navbar">
            <mt-tab-item v-if="isShowTable"  id="A">干部任免表</mt-tab-item>
            <mt-tab-item v-if="isShowPay" id="B">薪酬信息</mt-tab-item>
        </mt-navbar>
      </div> 
    </div>


<!--:swipeable="true"-->
      <mt-tab-container v-model="selectedVal" >
          <mt-tab-container-item id="A" v-if="isShowTable">
              <leader-info :emplid="emplid" :response="response" v-if="response"></leader-info>
          </mt-tab-container-item>
          <mt-tab-container-item id="B" v-if="isShowPay">  
            <leaderSalary></leaderSalary>
          </mt-tab-container-item>
      </mt-tab-container>
	</div>
</template>

<script>
  import Vue from 'vue'
  import {Navbar,TabItem,TabContainer, TabContainerItem} from 'mint-ui'


  Vue.component(Navbar.name, Navbar);
  Vue.component(TabItem.name, TabItem);
  Vue.component(TabContainer.name, TabContainer);
  Vue.component(TabContainerItem.name, TabContainerItem);
  import leaderInfo from '@/components/confirmTable/confirm'
  import leaderSalary from '@/components/confirmTable/leaderSalary'
  export default {
    name: 'app',
    data() {
      return {
        response:null,
        emplid:null,
        selectedVal:localStorage.getItem('leader_person')-0 ? 'A' : 'B',
        isShowTable:localStorage.getItem('leader_person')-0,
        isShowPay:localStorage.getItem('leader_pay')-0,
      };
    },

    methods: {


      handleImg : function(){
          var ImgObj = new Image(); //判断图片是否存在  
          ImgObj.src = this.URL.baseURI + "/img/"+this.emplid+".png";  
          //没有图片，则返回-1  
          if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {  
            return this.URL.baseURI + "/img/"+this.emplid+".png";  
          } else {  
            return '/static/imgs/man image.png';
          }  
      },

      getEmplid:function(keyToValue){
            var url = window.location.search;
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                var strs = str.split("&");
                // var keys = [],values = [];
                for (var i=0;i<strs.length;i++) {
                    var splitKey = strs[i].split("=");
                    if (keyToValue === splitKey[0]) {
                        return splitKey[1];
                    }
                } 
            }
      },
      sentAjax:function(params){
          return this.Axios.Post(this.URL.listAppointOrRemoveForm.url,params);
      },
      getLeaderInfo:function(params){
          var self = this;
          this.sentAjax(params).then(function(res){
              self.response = res.data.datas;
              self.$emit('loadEnd');
          })
      }
  
    },
    components: {
      MtNavbar:Navbar,
      'leader-info':leaderInfo,
      leaderSalary
    },
    filters:{
      handleBirth:function(value){
        // console.log(value.trim().substr(0,date.length-2).replace('-','.'),"handleBirth");
        var result;
        var mid = value.trim().split(" ")[0];
        value && ( mid && (result = mid.replace(/-/g,'.')));
        console.log(result,"result");
        return result || "";
      },
    },
    computed:{
        age:function(){
          var date;
          this.response.info[0].birthdate && (date =this.response.info[0].birthdate.split(" ")[0]);
          return date ? new Date().getFullYear() - new Date(date).getFullYear() : '';
          //    date && (result = date.trim().substr(0,date.length-2).replace('-','.'));


        },
        selected:{
            set: function(value) {
                this.selectedVal = value;
            },
            get: function() {
                this.selectedVal = this.isShowTable ? 'A' : 'B';
                return this.isShowTable ? 'A' : 'B';
            }
           
        },
        setClass:function(){
           return (this.isShowTable && this.isShowPay) ? 'full' : 'half';
        }
    },
    created:function(){
      this.emplid = localStorage.getItem('leader_em');
      // this.emplid = this.getEmplid("emplid");
    },
    beforeCreate:function(){
      // this.emplid = this.getEmplid("emplid");
      // console.log();
    },
    mounted:function(){
      var self =this;
      
      var params = {
        emplid : this.emplid
      };

      
      this.getLeaderInfo(params);

    }
  };
</script>

<style>

.confirm-bar{
  vertical-align: top;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color:#fff;
}
.confirm-bar .mint-navbar .mint-tab-item{
  width:50%;
}
.confirm-bar .mint-navbar{
  width:100%;
}
.confirm-area .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 0px;
    margin-bottom:0;

}
.confirm-bar .confirm-con{
  width:100%;
  overflow-x: auto;

  display: inline-flex;
}
.confirm-bar .confirm-con::-webkit-scrollbar{
  display: none;
}

.confirm-area .search-area{
  /*display: inline-block;*/
  top: 0;
  right: 0;
  position: absolute;
  height:1rem;
  width:1.5rem;
  vertical-align: top;
  background-color:rgba(255, 255, 255, 0.95);
}
.confirm-area .confirm-bar img{
  width:0.28rem;
  height:0.28rem;
  margin-top: 0.35rem;
}
.confirm-area {
  font-size:0.28rem;
  height:100%;
  overflow: auto;
}
.confirm-area .mint-tab-item-label {
    margin: auto;
    font-size: 0.32rem;
    font-weight: 600;
}


.confirm-area .mint-tab-container{
  /*height:100%;*/
  background-color: #f3f3f3;
  margin-top:1.002rem;
}
.confirm-area .mint-navbar .mint-tab-item.is-selected{
    border-bottom: 0.02rem solid #26a2ff !important;
}
.confirm-area .mint-navbar .mint-tab-item{
    border-bottom: 0.02rem solid #888;
}
.confirm-area .search-area .fenge-span{
    display: inline-block;
    height:0.5rem;
    margin-left: 0.5rem;
    margin-top: 0.2rem;
    margin-right:0.3rem;
    width:0.1rem;
    /*background:url('/static/imgs/fenge.png') no-repeat;*/
}


</style>
<style>
.confirm-bar .mint-navbar.half .mint-tab-item{
    width:100%;
}


</style>

